<script setup lang="ts">
import { ref } from 'vue'

const myModal = ref()
const imgList = ref<Array<string>>([])

const showModal = (jsonImgList: Array<string>) => {
  imgList.value = jsonImgList
  myModal.value?.showModal()
}

defineExpose({
  showModal,
})
</script>

<template>
  <MyModal ref="myModal" title="图片" :width="900">
    <template #content>
      <a-carousel arrows>
        <template #prevArrow>
          <div class="leftArrow" style="left: 10px; z-index: 1">
            <LeftOutlined />
          </div>
        </template>
        <template #nextArrow>
          <div class="rightArrow" style="right: 10px">下一个</div>
        </template>

        <div class="imgBox" v-for="(item, index) in imgList" :key="index">
          <img :src="item" />
        </div>
      </a-carousel>
    </template>
  </MyModal>
</template>

<style scoped lang="less">
.imgBox {
  height: 700px;
  // background: pink;
  img {
    margin: 0 auto;
    height: 100%;
    max-width: 700px;
  }
}

.leftArrow {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 0px solid transparent;
  border-top: 20px solid #8f39cc;
  transform: rotate(-135deg);
}

.rightArrow {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 0px solid transparent;
  border-top: 20px solid #8f39cc;
  transform: rotate(45deg);
}

// /deep/ .ant-carousel .slick-dots li {
//   background: #9400fd !important;
//   bottom: 10px;
// }
</style>
